<template>
  <view
    class="download-cell"
    :class="cellClass"
  >
    <view class="download-cell__title">
      <view
        class="download-cell--icon-wrap"
        v-if="icon"
      >
        <image
          :src="icon"
          mode="aspectFill"
        />
      </view>
      <view class="download-cell__title-text">{{title}}</view>
    </view>
    <view class="download-cell__value">
      <view class="download-cell--file">
        <view class="download-cell--file__name">{{fileName}}</view>
        <van-progress
          :percentage="downloadProgress"
          stroke-width="1px"
          :show-pivot="false"
          v-if="showProgress && downloading"
        />
      </view>
      <view class="download-cell--actions">
        <van-button
          icon="down"
          type="info"
          size="mini"
          v-if="!tempFile && !downloading"
          @click="onDownload"
        >下载</van-button>
        <van-button
          v-if="downloading"
          icon="cross"
          type="default"
          size="mini"
          @click="onCancel"
        />
        <van-button
          v-if="tempFile"
          icon="eye"
          type="primary"
          size="mini"
          @click="onPreviewDocument"
        >查看</van-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DownloadCell',
  props: {
    customClass: String,
    icon: String,
    title: String,
    fileName: String,
    filePath: String,
    showProgress: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: ''
    },
    center: {
      type: Boolean,
      default: true
    },
    user: Object
  },
  data () {
    return {
      downloading: false,
      downloadProgress: 0,
      savePath: '/test/',
      tempFile: '',
      task: null
    }
  },
  created () {
    wx.getSavedFileList({
      success (res) {
        console.log(res)
      }
    })
  },
  computed: {
    cellClass () {
      let classes = []
      if (this.center) {
        classes.push('download-cell--center')
      }
      if (this.size) {
        classes.push('download-cell--' + this.size)
      }
      if (this.customClass) {
        classes.push(this.customClass)
      }
      if (this.border) {
        classes.push('van-hairline--top-bottom')
      }
      return classes
    }
  },
  methods: {
    onPreviewDocument () {
      if (!this.tempFile) {
        return
      }
      wx.openDocument({
        filePath: this.tempFile,
        success: function (res) {
          console.log('打开文档成功')
        }
      })
    },
    onDownload () {
      if (!this.filePath) {
        return
      }
      if (!this.user || !this.user.actived) {
        wx.showModal({
          title: '账号登录提示',
          content: '您需要登录后才可下载当前附件内容',
          confirmText: '去登录',
          success (res) {
            if (res.confirm) {
              wx.navigateTo({
                url: '/pages/login/main'
              })
            }
          }
        })
      } else if (!this.user.authented) {
        wx.showModal({
          title: '用户资料完善提示',
          content: '您需要完善资料后才可下载当前附件内容',
          confirmText: '去完善',
          success (res) {
            if (res.confirm) {
              wx.navigateTo({
                url: '/pages/authent/main'
              })
            }
          }
        })
      } else {
        // this.savePath = wx.env.USER_DATA_PATH + '/' + this.fileName
        this.downloading = true
        this.task = wx.downloadFile({
          url: this.filePath, // 仅为示例，并非真实的资源
          // filePath: this.savePath,
          success: (res) => {
            console.log('downloadFile success:', res)
            // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
            if (res.statusCode === 200) {
            // this.tempFile = res.filePath
              this.tempFile = res.tempFilePath
              this.downloading = false
              this.task = null
            }
          },
          complete: (res) => {
            this.downloading = false
            this.offProgressUpdate()
            console.log('complete', res)
          },
          fail: function (e) {
            wx.showToast({
              title: '附件下载失败',
              icon: 'none',
              duration: 2000
            })
            console.log('error', e)
          }
        })
      }
    },
    onCancel () {
      this.task.abort() // 取消下载任务
      this.downloading = false
    },
    offProgressUpdate () {
      this.task.offProgressUpdate((res) => {
        this.downloading = false
      })
    }
  }
}
</script>

<style lang="less">
.download-cell {
  padding: 10px 16px;
  display: flex;
  background: #fff;
  font-size: 14px;
  &__title {
    flex: 1;
    display: flex;
    align-items: center;
  }
  &__value {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  &--file {
    position: relative;
    &__name {
      color: #969799;
    }
    .van-progress {
      position: absolute;
      left: 0;
      bottom: 0px;
      width: 100%;
    }
  }
  &--actions {
    margin-left: 5px;
  }
  &--icon-wrap {
    margin-right: 5px;
    font-size: 16px;
    height: 24px;
    display: flex;
    align-items: center;
    image {
      width: 1em;
      height: 1em;
    }
  }
  &--center {
    align-items: center;
    .download-cell-icon-warp {
      align-items: center;
    }
  }
  &--large {
    font-size: 16px;
    .download-cell-image {
      image {
        width: 50px;
        height: 50px;
      }
    }
  }
}
</style>
